<template>
  <div>
    <div id="map"></div>
    <div class="block">
      <span class="demonstration">间距</span>
      <el-slider v-model="distance"></el-slider>
    </div>
    <el-select v-model="drawType"
               placeholder="请选择"
               @change="draw">
      <el-option v-for="item in drawTypes"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
      </el-option>
    </el-select>
    <div>

    </div>
  </div>
</template>
<script>

import Feature from 'ol/Feature.js';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import Point from 'ol/geom/Point.js';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer.js';
import { Cluster, OSM, Vector as VectorSource } from 'ol/source.js';
import { Circle as CircleStyle, Fill, Stroke, Style, Text } from 'ol/style.js';


import { Modify, Snap } from 'ol/interaction';
import Draw, { createBox } from 'ol/interaction/Draw'

export default {
  data () {
    return {
      distance: 50,
      styleCache: {},
      drawType: '',
      drawTypes: [
        { label: '停止', value: 'None' },
        { label: '点', value: 'Point' },
        { label: '线', value: 'LineString' },
        { label: '面', value: 'Polygon' },
        { label: '圆', value: 'Circle' },
        { label: '矩形', value: 'rectangle' }
      ],
      clusterSource: null,
      drawVector: null,
      drawInteraction: null,
      snapInteraction: null
    }
  },
  methods: {
    draw () {
      if (this.drawType && this.drawType !== 'None') {
        if (this.drawInteraction) {
          this.map.removeInteraction(this.drawInteraction);
        }
        if (this.snapInteraction) {
          this.map.removeInteraction(this.snapInteraction);
        }
        if (this.drawType === 'rectangle') {
          this.drawInteraction = new Draw({
            type: 'Circle',
            source: this.drawVector,
            geometryFunction: createBox()
            // freehand: true
          });
        } else {
          this.drawInteraction = new Draw({
            type: this.drawType,
            source: this.drawVector
            // freehand: true
          });
        }
        this.map.addInteraction(this.drawInteraction);
        this.snapInteraction = new Snap({ source: this.drawVector });
        this.map.addInteraction(this.snapInteraction);
      } else {
        if (this.drawInteraction) {
          this.map.removeInteraction(this.drawInteraction);
        }
      }
    }
  },
  watch: {
    distance: function (val) {
      this.clusterSource.setDistance(val);
    }
  },
  mounted () {
    var count = 10;
    var features = new Array(count);
    var e = 4500000;
    for (var i = 0; i < count; ++i) {
      var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
      features[i] = new Feature(new Point(coordinates));
    }
    var vectorSource = new VectorSource({
      features: features
    });
    this.clusterSource = new Cluster({
      source: vectorSource,
      distance: this.distance
    });
    var clusters = new VectorLayer({
      source: this.clusterSource,
      style: feature => {
        var size = feature.get('features').length;
        var style = this.styleCache[size];
        if (!style) {
          style = new Style({
            image: new CircleStyle({
              radius: 10,
              stroke: new Stroke({
                color: '#fff'
              }),
              fill: new Fill({
                color: '#3399CC'
              })
            }),
            text: new Text({
              text: size.toString(),
              fill: new Fill({
                color: '#fff'
              })
            })
          });
          this.styleCache[size] = style;
        }
        return style;
      }
    });
    var raster = new TileLayer({
      source: new OSM()
    });
    this.drawVector = new VectorSource();
    var drawLayer = new VectorLayer({
      source: this.drawVector,
      style: new Style({
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new Stroke({
          color: '#ffcc33',
          width: 2
        }),
        image: new CircleStyle({
          radius: 7,
          fill: new Fill({
            color: '#ffcc33'
          })
        })
      })
    });
    this.map = new Map({
      layers: [raster, clusters, drawLayer],
      target: 'map',
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });
    var modifyInteraction = new Modify({ source: this.drawVector });
    this.map.addInteraction(modifyInteraction);

  }
}
</script>
<style lang="sass" scoped>
#map{height: 800px;}
</style>
